<template>
  <div class="task-list-container">
    <div class="page-header">
      <h1>我的已办</h1>
      <p>您已完成 {{ doneTasks.length }} 个任务</p>
    </div>

    <div class="task-list">
      <div v-for="task in filteredDoneList" :key="task.id" class="task-item completed">
        <div class="task-main">
          <h3>{{ task.title }}</h3>
          <div class="task-meta">
            <span class="process-name">{{ task.process }}</span>
            <span class="assignee">负责人: {{ task.assignee }}</span>
          </div>
          <div class="task-dates">
            <span>创建: {{ task.createTime }}</span>
            <span>完成: {{ task.completionTime }}</span>
          </div>
        </div>
        <div class="task-status">
          <span class="status status-completed">{{ task.status }}</span>
        </div>
        <div class="task-actions">
          <button class="btn-text btn-sm">
            <i class="fas fa-eye"></i>
            查看
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {reactive, computed, ref} from "vue";
import type {TaskItem} from "@/views/Test/components/Test7/type/taskType";

// 已办任务数据
const doneTasks = reactive<TaskItem[]>([
  {
    id: 101,
    title: '报销审批',
    process: '报销流程',
    assignee: '孙会计',
    priority: '中',
    status: '已完成',
    dueDate: '2023-07-15',
    createTime: '2023-07-10 09:30',
    completionTime: '2023-07-12 14:20'
  },
  {
    id: 102,
    title: '入职流程审批',
    process: 'HR流程',
    assignee: '周HR',
    priority: '高',
    status: '已完成',
    dueDate: '2023-07-08',
    createTime: '2023-07-05 13:15',
    completionTime: '2023-07-07 10:45'
  },
  {
    id: 103,
    title: '服务器采购',
    process: 'IT采购流程',
    assignee: '吴IT',
    priority: '中',
    status: '已完成',
    dueDate: '2023-07-12',
    createTime: '2023-07-03 11:20',
    completionTime: '2023-07-10 16:30'
  }
])


// 搜索关键词
const searchKeyword = ref('')

const filteredDoneList = computed(() => {
  if (!searchKeyword.value) return doneTasks
  return doneTasks.filter(item =>
      item.title.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
      item.process.toLowerCase().includes(searchKeyword.value.toLowerCase())
  )
})


</script>


<style scoped>

/* 页面头部 */
.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 8px;
}

.page-header p {
  color: #64748B;
}

/* 任务列表 */
.task-list-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.task-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.task-item {
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.task-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.task-item.completed {
  opacity: 0.8;
}

.task-main {
  flex: 1;
}

.task-main h3 {
  color: #1E293B;
  margin-bottom: 8px;
  font-weight: 600;
}

.task-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.process-name {
  color: #6366F1;
  font-weight: 500;
}

.assignee {
  color: #64748B;
}

.task-dates {
  display: flex;
  gap: 16px;
  font-size: 0.8rem;
  color: #94A3B8;
}


.task-status {
  margin: 0 20px;
}

.status {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.status-completed {
  background: #ECFDF5;
  color: #047857;
}

.task-actions {
  display: flex;
  gap: 8px;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.9rem;
}

.btn-text {
  background: transparent;
  border: none;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #64748B;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-text:hover {
  color: #6366F1;
  background: #F8FAFC;
}

.process-main h3 {
  color: #1E293B;
  margin-bottom: 8px;
  font-weight: 600;
}


.config-card h3 {
  color: #1E293B;
  margin-bottom: 8px;
  font-weight: 600;
}

.config-card p {
  color: #64748B;
  margin-bottom: 16px;
}


@media (max-width: 968px) {

  .task-meta, .task-dates {
    flex-direction: column;
    gap: 8px;
  }
}

</style>